<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据概览 - 睿途教育</title>
    <link href="../../assets/css/tailwind.css" rel="stylesheet">
    <link href="../../assets/css/font-awesome.min.css" rel="stylesheet">
    <script src="../../assets/js/chart.umd.min.js"></script>
</head>

<body class="bg-gray-100 font-sans text-gray-800">
    <div class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
            <div class="container mx-auto px-0 py-3 flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                    <h1 class="text-xl font-bold text-primary flex items-center">
                        <i class="fa fa-book mr-2"></i>
                        <span>睿途教育</span>
                    </h1>
                </div>

                <div class="hidden md:flex items-center space-x-6">
                    <!-- 控制面板 -->
                    <div class="relative group">
                        <a href="javascript:;" class="text-gray-600 font-medium border-b-2 border-primary pb-1 flex items-center">
                            <i class="fa fa-tachometer mr-1"></i> 控制面板
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-dashboard mr-2"></i> 仪表盘
                                </a>
                                <a href="data-overview.html" class="block px-4 py-2 text-sm text-primary bg-primary/10 font-medium">
                                    <i class="fa fa-chart-line mr-2"></i> 数据概览
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tasks mr-2"></i> 任务管理
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 教材管理 -->
                    <div class="relative group">
                        <a href="javascript:;" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-book mr-1"></i> 教材管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-list mr-2"></i> 版本管理
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-sitemap mr-2"></i> 章节管理
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-lightbulb-o mr-2"></i> 知识点管理
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-exchange mr-2"></i> 版本对比
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 题库管理 -->
                    <div class="relative group">
                        <a href="javascript:;" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-database mr-1"></i> 题库管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-question-circle mr-2"></i> 题目管理
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tags mr-2"></i> 标签管理
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-filter mr-2"></i> 筛选规则
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-upload mr-2"></i> 批量导入
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 组卷系统 -->
                    <div class="relative group">
                        <a href="javascript:;" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-files-o mr-1"></i> 组卷系统
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-magic mr-2"></i> 智能组卷
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-edit mr-2"></i> 手动组卷
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-copy mr-2"></i> 试卷模板
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-history mr-2"></i> 历史试卷
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 数据分析 -->
                    <div class="relative group">
                        <a href="javascript:;" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-bar-chart mr-1"></i> 数据分析
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-pie mr-2"></i> 学习分析
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-bar mr-2"></i> 成绩统计
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 趋势分析
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-file-text mr-2"></i> 报告生成
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 系统设置 -->
                    <div class="relative group">
                        <a href="javascript:;" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-cog mr-1"></i> 系统设置
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-users mr-2"></i> 用户管理
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-shield mr-2"></i> 权限设置
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-database mr-2"></i> 数据备份
                                </a>
                                <a href="javascript:;" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-cogs mr-2"></i> 系统配置
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索教材、章节或知识点..."
                            class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>

                    <div class="relative">
                        <button class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-bell text-xl"></i>
                            <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                        </button>
                    </div>

                    <div class="flex items-center space-x-2 cursor-pointer group">
                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像"
                            class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                        <span class="hidden md:inline font-medium">张老师</span>
                        <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                    </div>
                </div>
            </div>
        </header>

        <!-- 移动端侧边栏 (默认隐藏) -->
        <div id="sidebar" class="fixed inset-0 bg-black bg-opacity-50 z-50 lg:hidden hidden">
            <div class="bg-white h-full w-64 p-4 transform transition-transform duration-300">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-lg font-bold text-primary">菜单导航</h2>
                    <button id="sidebar-close" class="text-gray-500 hover:text-primary">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                <!-- 移动端菜单内容 (与桌面端相同) -->
                <div class="space-y-4">
                    <!-- 这里省略移动端菜单内容，与桌面端导航一致 -->
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <main class="flex-1 container mx-auto px-4 py-6">
            <!-- 面包屑导航 -->
            <div class="flex items-center text-sm text-gray-500 mb-4">
                <a href="../base.admin.html" class="hover:text-primary">首页</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <a href="javascript:;" class="hover:text-primary">控制面板</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <span class="text-primary font-medium">数据概览</span>
            </div>
            
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">数据概览</h2>
                <p class="text-gray-500 mt-1">实时监控系统关键指标和数据分析</p>
            </div>

            <!-- 数据统计卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <!-- 总用户数 -->
                <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-primary">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">总用户数</p>
                            <p class="text-2xl font-bold text-gray-900">12,847</p>
                            <p class="text-sm text-success flex items-center mt-1">
                                <i class="fa fa-arrow-up mr-1"></i>
                                <span>+12.5%</span>
                            </p>
                        </div>
                        <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                            <i class="fa fa-users text-primary text-xl"></i>
                        </div>
                    </div>
                </div>
                <!-- 活跃用户 -->
                <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-success">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">活跃用户</p>
                            <p class="text-2xl font-bold text-gray-900">8,234</p>
                            <p class="text-sm text-success flex items-center mt-1">
                                <i class="fa fa-arrow-up mr-1"></i>
                                <span>+8.2%</span>
                            </p>
                        </div>
                        <div class="w-12 h-12 bg-success/10 rounded-lg flex items-center justify-center">
                            <i class="fa fa-user-circle text-success text-xl"></i>
                        </div>
                    </div>
                </div>
                <!-- 题目总数 -->
                <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-warning">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">题目总数</p>
                            <p class="text-2xl font-bold text-gray-900">45,632</p>
                            <p class="text-sm text-success flex items-center mt-1">
                                <i class="fa fa-arrow-up mr-1"></i>
                                <span>+15.3%</span>
                            </p>
                        </div>
                        <div class="w-12 h-12 bg-warning/10 rounded-lg flex items-center justify-center">
                            <i class="fa fa-question-circle text-warning text-xl"></i>
                        </div>
                    </div>
                </div>
                <!-- 试卷总数 -->
                <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-danger">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">试卷总数</p>
                            <p class="text-2xl font-bold text-gray-900">2,847</p>
                            <p class="text-sm text-danger flex items-center mt-1">
                                <i class="fa fa-arrow-down mr-1"></i>
                                <span>-2.1%</span>
                            </p>
                        </div>
                        <div class="w-12 h-12 bg-danger/10 rounded-lg flex items-center justify-center">
                            <i class="fa fa-file-text text-danger text-xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                <!-- 用户增长趋势 -->
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-gray-800">用户增长趋势</h3>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-xs bg-primary text-white rounded-md time-range-btn">7天</button>
                            <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-md time-range-btn">30天</button>
                            <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-md time-range-btn">90天</button>
                        </div>
                    </div>
                    <div class="h-64 bg-gray-50 rounded-lg p-4">
                        <canvas id="userGrowthChart" width="400" height="200"></canvas>
                    </div>
                </div>
                <!-- 题目分类统计 -->
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-gray-800">题目分类统计</h3>
                        <button class="text-primary text-sm hover:underline">查看详情</button>
                    </div>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-3 h-3 bg-primary rounded-full mr-3"></div>
                                <span class="text-sm text-gray-600">数学</span>
                            </div>
                            <div class="flex items-center">
                                <div class="w-24 bg-gray-200 rounded-full h-2 mr-3">
                                    <div class="bg-primary h-2 rounded-full" style="width: 75%"></div>
                                </div>
                                <span class="text-sm font-medium text-gray-800">15,234</span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-3 h-3 bg-success rounded-full mr-3"></div>
                                <span class="text-sm text-gray-600">语文</span>
                            </div>
                            <div class="flex items-center">
                                <div class="w-24 bg-gray-200 rounded-full h-2 mr-3">
                                    <div class="bg-success h-2 rounded-full" style="width: 60%"></div>
                                </div>
                                <span class="text-sm font-medium text-gray-800">12,456</span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-3 h-3 bg-warning rounded-full mr-3"></div>
                                <span class="text-sm text-gray-600">英语</span>
                            </div>
                            <div class="flex items-center">
                                <div class="w-24 bg-gray-200 rounded-full h-2 mr-3">
                                    <div class="bg-warning h-2 rounded-full" style="width: 45%"></div>
                                </div>
                                <span class="text-sm font-medium text-gray-800">9,876</span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-3 h-3 bg-danger rounded-full mr-3"></div>
                                <span class="text-sm text-gray-600">物理</span>
                            </div>
                            <div class="flex items-center">
                                <div class="w-24 bg-gray-200 rounded-full h-2 mr-3">
                                    <div class="bg-danger h-2 rounded-full" style="width: 30%"></div>
                                </div>
                                <span class="text-sm font-medium text-gray-800">8,066</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最近活动表格 -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">最近活动</h3>
                    <button class="text-primary text-sm hover:underline">查看全部</button>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b border-gray-200">
                                <th class="text-left py-3 px-4 font-medium text-gray-600">用户</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">活动</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">时间</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b border-gray-100">
                                <td class="py-3 px-4">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/1/32/32" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                                        <span class="font-medium text-gray-800">李老师</span>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-gray-600">上传了数学试卷</td>
                                <td class="py-3 px-4 text-gray-500">2分钟前</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 text-xs bg-success/10 text-success rounded-full">成功</span>
                                </td>
                            </tr>
                            <tr class="border-b border-gray-100">
                                <td class="py-3 px-4">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/2/32/32" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                                        <span class="font-medium text-gray-800">王老师</span>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-gray-600">创建了新的知识点</td>
                                <td class="py-3 px-4 text-gray-500">5分钟前</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 text-xs bg-success/10 text-success rounded-full">成功</span>
                                </td>
                            </tr>
                            <tr class="border-b border-gray-100">
                                <td class="py-3 px-4">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/3/32/32" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                                        <span class="font-medium text-gray-800">张老师</span>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-gray-600">导入了题目数据</td>
                                <td class="py-3 px-4 text-gray-500">10分钟前</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 text-xs bg-warning/10 text-warning rounded-full">处理中</span>
                                </td>
                            </tr>
                            <tr class="border-b border-gray-100">
                                <td class="py-3 px-4">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/4/32/32" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                                        <span class="font-medium text-gray-800">陈老师</span>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-gray-600">生成了智能试卷</td>
                                <td class="py-3 px-4 text-gray-500">15分钟前</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 text-xs bg-success/10 text-success rounded-full">成功</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="py-3 px-4">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/5/32/32" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                                        <span class="font-medium text-gray-800">刘老师</span>
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-gray-600">更新了教材版本</td>
                                <td class="py-3 px-4 text-gray-500">20分钟前</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-1 text-xs bg-danger/10 text-danger rounded-full">失败</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </main>

        <!-- 页脚 -->
        <footer class="bg-white border-t border-gray-200 py-4">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="text-center md:text-left mb-4 md:mb-0">
                        <p class="text-sm text-gray-500">© 2025 教材资源管理系统. 保留所有权利.</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="javascript:;" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-question-circle mr-1"></i> 帮助中心
                        </a>
                        <a href="javascript:;" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-file-text-o mr-1"></i> 使用条款
                        </a>
                        <a href="javascript:;" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-shield mr-1"></i> 隐私政策
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <!-- Chart.js 图表初始化 -->
    <script>
        // 等待页面加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 侧边栏切换逻辑
            const sidebarToggle = document.getElementById('sidebar-toggle');
            const sidebarClose = document.getElementById('sidebar-close');
            const sidebar = document.getElementById('sidebar');
            
            if (sidebarToggle && sidebar && sidebarClose) {
                sidebarToggle.addEventListener('click', function() {
                    sidebar.classList.remove('hidden');
                    // 防止背景滚动
                    document.body.style.overflow = 'hidden';
                });
                
                sidebarClose.addEventListener('click', function() {
                    sidebar.classList.add('hidden');
                    // 恢复背景滚动
                    document.body.style.overflow = '';
                });
                
                // 点击侧边栏外部关闭
                sidebar.addEventListener('click', function(e) {
                    if (e.target === sidebar) {
                        sidebar.classList.add('hidden');
                        document.body.style.overflow = '';
                    }
                });
            }
            
            // 导航栏滚动效果
            const header = document.querySelector('header');
            window.addEventListener('scroll', function() {
                if (window.scrollY > 10) {
                    header.classList.add('shadow-md');
                    header.classList.remove('shadow-sm');
                } else {
                    header.classList.remove('shadow-md');
                    header.classList.add('shadow-sm');
                }
            });
            
            // 时间范围按钮切换
            const timeButtons = document.querySelectorAll('.time-range-btn');
            timeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    timeButtons.forEach(btn => {
                        btn.className = 'px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-md time-range-btn';
                    });
                    this.className = 'px-3 py-1 text-xs bg-primary text-white rounded-md time-range-btn';
                });
            });

            // 用户增长趋势图表
            const userGrowthCtx = document.getElementById('userGrowthChart').getContext('2d');
            const userGrowthChart = new Chart(userGrowthCtx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                    datasets: [{
                        label: '用户数量',
                        data: [8500, 9200, 9800, 10500, 11200, 11800, 12847],
                        borderColor: '#3B82F6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.4,
                        pointBackgroundColor: '#3B82F6',
                        pointBorderColor: '#ffffff',
                        pointBorderWidth: 2,
                        pointRadius: 4,
                        pointHoverRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            titleColor: '#ffffff',
                            bodyColor: '#ffffff',
                            borderColor: '#3B82F6',
                            borderWidth: 1,
                            cornerRadius: 8,
                            displayColors: false
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#6B7280',
                                font: {
                                    size: 12
                                }
                            }
                        },
                        y: {
                            grid: {
                                color: '#E5E7EB',
                                drawBorder: false
                            },
                            ticks: {
                                color: '#6B7280',
                                font: {
                                    size: 12
                                },
                                callback: function(value) {
                                    return value.toLocaleString();
                                }
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    }
                }
            });

            // 题目分类统计图表
            const categoryCtx = document.createElement('canvas');
            categoryCtx.id = 'categoryChart';
            categoryCtx.width = 200;
            categoryCtx.height = 200;
            
            // 将图表插入到题目分类统计区域
            const categoryContainer = document.querySelector('.space-y-4');
            if (categoryContainer) {
                const chartDiv = document.createElement('div');
                chartDiv.className = 'mt-4';
                chartDiv.appendChild(categoryCtx);
                categoryContainer.appendChild(chartDiv);
            }

            const categoryChart = new Chart(categoryCtx, {
                type: 'doughnut',
                data: {
                    labels: ['数学', '语文', '英语', '物理'],
                    datasets: [{
                        data: [15234, 12456, 9876, 8066],
                        backgroundColor: [
                            '#3B82F6',
                            '#10B981',
                            '#F59E0B',
                            '#EF4444'
                        ],
                        borderWidth: 0,
                        hoverBorderWidth: 2,
                        hoverBorderColor: '#ffffff'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            titleColor: '#ffffff',
                            bodyColor: '#ffffff',
                            borderColor: '#3B82F6',
                            borderWidth: 1,
                            cornerRadius: 8,
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.parsed;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = ((value / total) * 100).toFixed(1);
                                    return `${label}: ${value.toLocaleString()} (${percentage}%)`;
                                }
                            }
                        }
                    },
                    cutout: '60%'
                }
            });
        });
    </script>
</body>

</html>